<template>
  <h3>{{ eidtId ? "编辑" : "新建" }}分类</h3>
  <div class="createClass">
    <el-form
      :inline="true"
      :model="category.categoryMsg"
      class="demo-form-inline"
      @submit="() => false"
    >
      <el-form-item label="广告类名">
        <el-input
          v-model="category.categoryMsg.name"
          placeholder="请输入分类名"
        />
      </el-form-item>
      <el-form-item
        ><el-button @click="addAd">增加广告信息</el-button></el-form-item
      >
      <!-- 增加广告信息 -->
      <el-form-item class="addMsg">
        <el-input
          v-model="category.item.linkAddress"
          placeholder="请输入跳转地址"
        ></el-input>
        <!-- 广告图片上传概览 -->
        <el-upload
          class="avatar-uploader"
          action="/api/upload"
          :heders="useGetToken()"
          :show-file-list="false"
          :on-success="adUploads"
        >
          <img
            v-if="category.item.url"
            :src="category.item.url"
            class="avatar"
          />
          <el-icon
            v-else
            class="avatar-uploader-icon"
            style="border: 1px solid black; margin-top: 20px"
            ><Plus
          /></el-icon>
        </el-upload>
      </el-form-item>
      <!-- 广告详情 -->
      <el-form-item label="广告详情">
        <div class="skills-list">
          <div
            class="skill"
            v-for="(item, index) in category.items"
            :key="index"
          >
            <img :src="item.url" />
            <p style="">{{ item.linkAddress }}</p>
            <div class="skill-edit">
              <el-button size="small" text @click="deleteAd(index)"
                >删除</el-button
              >
              <el-button size="small" text @click="editAd(index)"
                >编辑</el-button
              >
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit"
          >{{ eidtId ? "更新" : "创建" }}广告</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, reactive } from "vue";
import { creatAd, getAdMsg, upDateAd, getAd } from "@/api/getAd";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";
import { Plus } from "@element-plus/icons-vue";

import {Items} from './AdEditType';
import {useGetToken} from "@/hook/useGetToken";
//分类信息
const category = reactive({
  categoryMsg: {
    name: "",
    items: <Items[]>[],
  },
  //父级信息
  items: <Items[]>[],
  item: <Items>{},
});

const router = useRouter();
const route = useRoute();

const eidtId = computed(() => {
  return route.params.id;
});
//提交分类信息
const onSubmit = async () => {
  let result;
  if (route.params.id) {
    //更新分类数据
    result = await upDateAd(eidtId.value, category.categoryMsg);
  } else {
    //添加分类
    result = await creatAd(category.categoryMsg);
  }
  //清空临时数据
  category.items = []
  if (result.status === 200) {
    router.push({
      path: "/home/adList",
    });
    //消息提示框
    ElMessage({
      message: "保存成功",
      type: "success",
    });
  } else {
    ElMessage({
      message: "保存失败",
      type: "warning",
    });
  }
};

//获取被编辑数据的详情
const getEdit = async () => {
  let result = await getAdMsg(eidtId.value);

  if (result.status === 200) {
    category.categoryMsg = result.data
    category.items = result.data.items;
  }
};
//addAd添加广告详情
const addAd = () => {
  category.items.push(Object.assign({}, category.item));
  category.categoryMsg.items.push(Object.assign({},category.item))
};
//广告图片上传成功回调
const adUploads = (res: any) => {
  category.item.url = res.url;
};

//点击删除广告栏数据
const deleteAd = (index: number) => {
  category.items.splice(index, 1);
};
//点击编辑广告详情
const editAd = (index: number) => {
  category.item = category.items[index];
};

onBeforeMount(async () => {
  if (route.params.id) await getEdit();
});
</script>

<style lang="less" scoped>
.createClass {
  margin: 20px 20px 0 20px;
}

.demo-form-inline {
  display: flex;
  flex-direction: column;
}
//添加图片信息盒子
.addMsg {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

//广告列表样式
//技能栏样式
.skills-list {
  height: 150px;

  // border: 2px solid #cfd2cf;
  border-radius: 10px;

  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .skill {
    width: 200px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    .skill-edit {
      display: flex;
    }
    img {
      height: 50px;
      min-width: 50px;
    }
  }
}
</style>
